<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">留言平台</view>
      <view class="nav-subtitle">分享你的心情故事</view>
    </view>

    <!-- 留言列表 -->
    <view class="message-list">
      <view v-if="list.length === 0" class="empty-state">
        <u-icon name="info-circle" color="#6c8eef" size="48"></u-icon>
        <text class="empty-text">暂无留言</text>
        <text class="empty-tip">快来分享你的心情吧</text>
      </view>
      
      <view v-else class="message-card" v-for="item in list" :key="item._id">
        <view class="message-header">
          <view class="user-info">
            <!-- 根据匿名状态显示不同头像 -->
            <u-image 
              :src="item.is_anonymous ? '/static/anonymous.png' : item.user_id[0].avatar" 
              width="60rpx" 
              height="60rpx" 
              shape="circle"
            ></u-image>
            <text class="username">{{ item.is_anonymous ? '匿名用户' : item.user_id[0].nickname }}</text>
          </view>
          <text class="time">{{ formatTime(item.publish_date) }}</text>
        </view>
        
        <view class="message-content">
          <text class="text">{{ item.title }}</text>
          <text class="text content-text">{{ item.content }}</text>
        </view>

        <view class="message-footer">
          <view class="action-btn" @click="handleLike(item._id)">
            <u-icon 
              name="heart" 
              :color="item.hasLiked ? '#ff4d4f' : '#999'" 
              size="32"
            ></u-icon>
            <text :class="{ 'liked': item.hasLiked }">{{ item.like_count || 0 }}</text>
          </view>
          
          <!-- 根据comment_status显示评论按钮 -->
          <view v-if="item.comment_status === 1" class="action-btn" @click="handleComment(item._id)">
            <u-icon name="chat" color="#999" size="32"></u-icon>
            <text>{{ item.comment_count || 0 }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 发布按钮 -->
    <view class="publish-btn" @click="handlePublish">
      <u-icon name="edit-pen-fill" color="#ffffff" size="32"></u-icon>
      <text>发布留言</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
	  handlePublish() {
	      uni.navigateTo({
	        url: 'publish' // 根据实际目录结构调整路径
	      });
	    },
		
    async loadData() {
      const db = uniCloud.database()
      const res = await db.collection('opendb-news-articles')
        .where('article_status == 1')
        .orderBy('publish_date', 'desc')
        .get()
        
      this.list = res.result.data.map(item => ({
        ...item,
        hasLiked: false // 根据实际需求添加点赞状态
      }))
    },
    
    formatTime(timestamp) {
      // 保持原有时间格式化逻辑
      return new Date(timestamp).toLocaleDateString()
    },
    
    async handleLike(articleId) {
      // 添加登录验证
      const res =  uniCloud.callFunction({
      	name:"checkToken"
      })
	  const tokenExpired = res.tokenExpired
      const hasLogin = !tokenExpired
      if (!hasLogin) {
        return uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
      }
    
      try {
        await uniCloud.callFunction({
          name: 'like-article',
          data: { articleId }
        })
        // 局部更新代替重新加载
        this.list = this.list.map(item => {
          if(item._id === articleId) {
            return {
              ...item,
              hasLiked: true,
              like_count: (item.like_count || 0) + 1
            }
          }
          return item
        })
      } catch (e) {
        uni.showToast({
          title: e.message || '操作失败',
          icon: 'none'
        })
      }
    },
    
    handleComment(articleId) {
      // 保持原有评论处理逻辑
      if (this.list.find(item => item._id === articleId)?.comment_status !== 1) return
      // 跳转评论页等操作
    }
  }
}
</script>

<style lang="scss">
	/* 全局变量 */
	:root {
		--primary-color: #6c8eef;
		--primary-hover: #5a7de0;
		--secondary-color: #f8f9fa;
		--text-color: #2c3e50;
		--border-color: #dee2e6;
		--shadow-sm: 0 4rpx 8rpx rgba(0,0,0,0.05);
		--shadow-md: 0 8rpx 12rpx rgba(0,0,0,0.1);
		--shadow-lg: 0 16rpx 32rpx rgba(0,0,0,0.1);
		--radius-sm: 16rpx;
		--radius-md: 24rpx;
		--radius-lg: 32rpx;
		--spacing-sm: 16rpx;
		--spacing-md: 32rpx;
		--spacing-lg: 48rpx;
	}

	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		padding: 30rpx;
	}

	.nav-bar {
		margin-bottom: 40rpx;
		padding: 0 20rpx;

		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
			position: relative;
			padding-left: 20rpx;
			margin-bottom: 10rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 32rpx;
				background: #6c8eef;
				border-radius: 4rpx;
			}
		}

		.nav-subtitle {
			font-size: 26rpx;
			color: #666;
			padding-left: 28rpx;
		}
	}

	.publish-btn {
		position: fixed;
		right: 40rpx;
		bottom: 40rpx;
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #6c8eef 0%, #5a7de0 100%);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.3);
		transition: all 0.3s ease;

		text {
			color: white;
			font-size: 24rpx;
		}

		&:active {
			transform: scale(0.95);
		}
	}

	.message-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		padding-bottom: 160rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;

		.empty-text {
			font-size: 32rpx;
			color: #2c3e50;
			margin: 20rpx 0;
		}

		.empty-tip {
			font-size: 26rpx;
			color: #666;
		}
	}

	.message-card {
		background: white;
		border-radius: 24rpx;
		padding: 30rpx;
		box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.1);
	}

	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		gap: 16rpx;

		.username {
			font-size: 28rpx;
			font-weight: 500;
			color: #2c3e50;
		}
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}

	.message-content {
		margin-bottom: 20rpx;

		.text {
			font-size: 28rpx;
			color: #2c3e50;
			line-height: 1.6;
		}
	}

	.message-footer {
		display: flex;
		gap: 40rpx;
		padding-top: 20rpx;
		border-top: 2rpx solid rgba(108, 142, 239, 0.1);
	}

	.action-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;

		text {
			font-size: 26rpx;
			color: #999;

			&.liked {
				color: #ff4d4f;
			}
		}
	}

	@media screen and (min-width: 690px) {
		.container {
			max-width: 800rpx;
			margin: 0 auto;
		}
	}
</style> 